﻿@inherits System.Web.Mvc.WebViewPage

@{
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<div id="container" style="display:none;">
    <canvas id="graffiti" width="600" height="800"></canvas>
</div>
<div id="commands">
    <form>
    <select id="colors"></select>
    <button id="end">End</button>
    </form>
    <span id="debug"></span>
</div>

@section session{

    <ul id="sessions"></ul>

}

@section footer{

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.mousewheel.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/scripts/graffiti.js")"></script>

<script type="text/javascript">
    $(function () {
        var colors = [
          { name: "Black", bg: "#000000", color: "#fff" },
          { name: "Gray", bg: "#808080", color: "#000" },
          { name: "Silver", bg: "#C0C0C0", color: "#000" },
          { name: "White", bg: "#FFFFFF", color: "#000" },
          { name: "Red", bg: "#FF0000", color: "#000" },
          { name: "Yellow", bg: "#FFFF00", color: "#000" },
          { name: "Lime", bg: "#00FF00", color: "#000" },
          { name: "Aqua", bg: "#00FFFF", color: "#000" },
          { name: "Blue", bg: "#0000FF", color: "#000" },
          { name: "Fuchsia", bg: "#FF00FF", color: "#000" },
          { name: "Maroon", bg: "#800000", color: "#000" },
          { name: "Olive", bg: "#808000", color: "#000" },
          { name: "Green", bg: "#008000", color: "#000" },
          { name: "Teal", bg: "#008080", color: "#000" },
          { name: "Naby", bg: "#000080", color: "#000" },
          { name: "Purple", bg: "#800080", color: "#000" }
        ];
        for (var i = 0; i < colors.length; i++) {
            var opt = $("<option />").css({
                backgroundColor: colors[i].bg,
                color: colors[i].color
            })
                               .val(colors[i].bg)
                               .text(colors[i].name);
            $("#colors").append(opt);
        }

        // 依存関係へんてこですね。interfaceだと思ってね。
        var graffitiId = @View.GraffitiId ;
        var sessionId = @View.SessionId ;

        var graffiti = new Graffiti("graffiti", "colors", graffitiId, sessionId);
        if (graffitiId != 0 && sessionId != 0) {
            var input = graffiti.isMobileSafari() ?
                      new TouchPanelInput(graffiti) :
                      new MouseInput(graffiti);
            graffiti.isDown = function () { return input.isDown(); };
        } else {
            graffiti.isDown = function () { return false; };
        }
        
        var network = new NetworkCommunicator('@ViewContext.HttpContext.Request.ApplicationPath',graffiti,$("#sessions"));
		
        $("#container").fadeIn();

        $("#undo").click(function (e) {
            e.preventDefault();

            graffiti.undo();
        })
        $("#end").click(function (e) {
            e.preventDefault();

            location.href = '@Url.Action("Index","Graffitis", new {id=""})';
        })
    });
</script>

}
